<template>
	<view class="user_recharge">
		<view class="recharge_list" v-for="(item,index) in rechargeList" :key="index">
			<view class="recharge_list_title display align-items" v-if="item.year!=''">
				<text class="recharge_list_title_line"></text>
				{{item.year}}
			</view>
			<view class="recharge_info display space-between align-items">
				<view class="recharge_info_left">
					<view class="recharge_info_left_top">后台充值</view>
					<view class="recharge_info_left_bottom">{{item.createtime}}</view>
				</view>
				<view class="recharge_info_right" v-if="item.type=='score'">+{{item.abs}}</view>
				<view class="recharge_info_right" v-if="item.type=='amount'">+{{item.abs}}</view>
				<view class="recharge_info_right" v-if="item.type=='fund'">+{{item.abs}}</view>
			</view>
		</view>
		<view class="over" v-if="flag" style="margin-top: 15px;">我也是有底线的</view>
		<view class="no_thing" v-if="noOrder">
			<image src="../../../static/icon/no_order.png"></image>
			<view class="no_thing_text">暂无内容</view>
		</view>
		<is-login v-on:childClick='listenToClose' v-on:childClickAgain='listenToCloseAgain' v-if="isLogin==0"></is-login>
	</view>
</template>

<script>
	import isLogin from '../../../components/isLogin.vue'
	import checktime from '../../../util/formTime.js'
	// import priceList from '../../../components/priceList.vue'
	export default {
		data() {
			return {
				rechargeList: [],
				flag: false,
				page: 1,
				limit:15,
				noOrder: false,
				isLogin: 1
			}
		},
		components: {
			isLogin,
			// priceList
		},
		onLoad() {
			if (!uni.getStorageSync('openid')) {
				this.isLogin = 0
			} else {
				this.getrecharge()
			}

		},
		onPullDownRefresh() {
			this.page = 1
			this.rechargeList = []
			this.flag = false
			this.noOrder = false
			uni.showToast({
				icon: 'loading',
				title: '加载中',
			});
			setTimeout(() => {
				this.getrecharge(() => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			}, 1000)
		},
		onReachBottom() {
			if (this.rechargeList.length < this.page * this.limit) {
				return this.flag = true
			}
			this.noOrder = false
			this.page++
			this.getrecharge()
		},
		methods: {
			// 獲取充值
			getrecharge(callback) {
				let that = this
				var data = {
					openid: uni.getStorageSync('openid'),
					page: that.page,
					limit: that.limit
				}
				this.$myRequest.post(this.$api.mine.getRechargeLogPage, data).then(res => {
					callback && callback()
					if (res.code == '200') {
						if (that.page == 1) {
							if (res.data.data.length == 0) {
								this.noOrder = true
								this.flag = false
								return false
							} else {
								if (res.data.data.length < this.limit) {
									this.flag = true
									this.noOrder = false
								}
								for (let i = 0; i < res.data.data.length; i++) {
									res.data.data[i].createtime = checktime.changeTime(res.data.data[i].createtime)
									for (let n = i + 1; n < res.data.data.length; n++) {
										if (res.data.data[i].year == res.data.data[n].year) {
											res.data.data[n].year = '';
										}
									}
								}
								this.rechargeList = res.data.data
							}

						} else {
							for (let i = 0; i < res.data.data.length; i++) {
								for (let n = i + 1; n < res.data.data.length; n++) {
									if (res.data.data[i].year == res.data.data[n].year) {
										res.data.data[n].year = ''
									}
								}
							}
							this.rechargeList = [...this.rechargeList, ...res.data.data]
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},

			listenToClose(msg) {
				this.isLogin = msg
			},
			listenToCloseAgain() {
				this.getrecharge()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user_recharge {
		width: 690rpx;
		margin: auto;
		// padding: 20rpx 0;

		.recharge_list {
			// margin-bottom: 30rpx;

			.recharge_list_title {
				font-size: 26rpx;
				color: #666666;
				margin-top: 30rpx;

				.recharge_list_title_line {
					width: 5rpx;
					height: 19rpx;
					background: #4b968d;
					border-radius: 2px;
					margin-right: 8rpx;
				}
			}

			.recharge_info {
				padding: 23rpx 0;
				border-bottom: 1px solid #E5E5E5;

				.recharge_info_left {
					.recharge_info_left_top {
						color: #333333;
						font-size: 26rpx;
					}

					.recharge_info_left_bottom {
						color: #999999;
						font-size: 22rpx;
						margin-top: 0.5rpx;
					}
				}

				.recharge_info_right {
					font-size: 30rpx;
					color: #333;
				}
			}
		}
	}
</style>
